<template>
    <div class="app-container">
      <div  class="back-container">
        <div class="left-container">
          <img src="./assets/login/01.jpg" alt="">
        </div>
        <div class="right-container">
          
        </div>
      </div>
    </div>
  </template>
  
  <script>
  
  </script>
  
  <style scoped>
  .app-container {
    height: 100vh;/* 这里的高度是相对于视口（Viewport）的高度，即浏览器窗口的可视区域。100vh意味着元素将占据整个视口的高度。*/
    background-color: #D97C5D;
    display: flex;/* 将父容器设置为Flex容器*/
    align-items: center;/* flex容器中的子元素垂直方向居中*/
    justify-content: center;/* flex容器中的子元素水平方向居中*/
  }
  
  .back-container{
    width: 1600px;
    height: 800px;
    display: flex;
    background-color: #E0E5E3;
    border-radius: 20px;
    display: flex;/* 将父容器设置为Flex容器*/
    justify-content: space-between;/* 第一个子元素靠左对齐，最后一个子元素靠右对齐，剩余的子元素在中间均匀分布*/
    /**
    justify-content: flex-start;：子元素靠左对齐。
    justify-content: flex-end;：子元素靠右对齐。
    justify-content: center;：子元素居中对齐。
    justify-content: space-around;：子元素均匀分布，每个子元素两侧的间距相等。
    justify-content: space-evenly;：子元素均匀分布，所有间距（包括边缘）相等。
     */
    align-items: center;/* flex容器中的子元素垂直方向居中*/
    padding: 20px;/*为元素的四个边（上、右、下、左）设置相同的内边距。*/
  }
  
  .left-container{
    width: 78%;
    height: 99%;
    background-color: #4B2C2E;
    border-radius: 20px;
    img{
      width: 100%;
      height: 100%;
      object-fit: cover;/*图像将被缩放，以完全覆盖容器，同时保持其宽高比。如果图像的宽高比与容器不同，图像将被裁剪以适应容器。*/
      border-radius: 20px;
    }
  }
  
  .right-container{
    width: 20%;
    height: 70%;
    background-color: #EBAF8D;
  }
  
  </style>
  